<template>
  <view class="page">
    <video ref="video" id="myVideo" class="video" :src="src" controls="true">
      <cover-view class="coverview" style="overflow-y: scroll">
        <text class="text">{{
          "\uEA06\uEA0E\uEA0C\uEA0A 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view"
        }}</text>
      </cover-view>
    </video>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          style="width: 100%; height: 400rpx"
          :latitude="latitude"
          :longitude="longitude"
          :scale="16"
          :markers="covers"
        >
          <cover-view class="map-cover">
            <button @tap="onCoverTap">地图上的cover-view</button>
          </cover-view>
        </map>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: 0, // 使用 marker点击事件 需要填写id
        title: "map",
        latitude: 39.909,
        longitude: 116.39742,
        title: "cover-view",
        src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
        covers: [
          {
            latitude: 39.909,
            longitude: 116.39742,
            iconPath: "/static/location.png",
          },
          {
            latitude: 39.9,
            longitude: 116.39,
            iconPath: "/static/location.png",
          },
        ],
      };
    },
    methods: {
      onCoverTap() {
        uni.showToast({ title: "点击了cover-view", icon: "none" });
      },
    },
  };
</script>

<style>
  .map-cover {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 10;
  }
  .video {
    width: 750rpx;
    height: 400rpx;
    background-color: #808080;
  }
  .coverview {
        position: absolute;
        background-color: #808080;
        left: 60rpx;
        right: 0;
        top: 50rpx;
        height: 180rpx;
        border-width: 10rpx;
        border-color: #4CD964;
    }
</style>
